revision:
The "a" element creates a link around SVG elements, i.e. it creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other URL. It is very similar to HTML's "a" element. SVG's "a" element is a container, which means you can create a link around text (like in HTML) but also around any shape.
Specific attributes include:
the xlink:show attribute (depreciated) indicates how a linked resource should be opened and is meant for XLink-aware processors. In case of a conflict, the "target" attribute has priority, since it can express a wider range of values. Values:
embed (i.e. instead of linking to the resource it will be loaded and shown within the document )
new (i.e. the referenced resource is opened in a new window or tab)
replace (i.e. the referenced resource is opened in the same window or tab)
other (i.e. other markup present in the link, i.e. the "target" attribute, determines its behavior)
none (i.e. there is no indication for how to refer to the linked resource.)
the xlink:actuate attribute communicates the desired timing of traversal from the starting resource to the ending resource.
the xlink:href attribute (depreciated) defines a reference to a resource as a reference IRI. The exact meaning of that link depends on the context of each element using it.
the target attribute should be used when there are multiple possible targets for the ending resource, such as when the parent document is embedded within an HTML or XHTML document, or is viewed with a tabbed browser. This attribute specifies the name of the browsing context (e.g., a browser tab or an (X)HTML iframe or object element) into which a document is to be opened when the link is activated.
codes:example
<div class="a">
<svg viewBox="0 0 30 15">
<!-- a link around a shape -->
<a href="https://www.lwitters.com">
<circle cx="8" cy="4" r="3.5"/>
</a>
<!-- a link around a text -->
<a href="https://www.lwitters.com">
<text x="7" y="11" text-anchor="right">
<circle>
</text>
</a>
</svg>
</div>
The SVG <animate> element provides a way to animate an attribute of an element over time. Specific attributes include:
animation timing attributes:
the begin attribute defines when an animation should begin or when an element should be discarded. The attribute value is a semicolon separated list of values. The interpretation of a list of start times is detailed in the SMIL specification in "Evaluation of begin and end time lists". Each individual value can be one of the following : 'offset-value', 'syncbase-value', 'event-value', 'repeat-value', 'accessKey-value', 'wallclock-sync-value' or the keyword 'indefinite'.
the dur attribute indicates the simple duration of an animation.
the end attribute defines an end value for the animation that can constrain the active duration.
the min attribute specifies the minimum value of the active animation duration.
the max attribute specifies the maximum value of the active animation duration.
the restart attribute specifies whether or not an animation can restart.
the repeatCount attribute indicates the number of times an animation will take place.
the repeatDur attribute specifies the total duration for repeating an animation.
the fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
animation value attributes:
the calcMode attribute specifies the interpolation mode for the animation. The default mode is linear, however if the attribute does not support linear interpolation (e.g. for strings), the calcMode attribute is ignored and discrete interpolation is used.
the values attribute has different meanings, depending upon the context where it's used, either it defines a sequence of values used over the course of an animation, or it's a list of numbers for a color matrix, which is interpreted differently depending on the type of color change to be performed.
the keyTimes attribute represents a list of time values used to control the pacing of the animation. Each time in the list corresponds to a value in the values attribute list, and defines when the value is used in the animation. Each time value in the keyTimes list is specified as a floating point value between 0 and 1 (inclusive), representing a proportional offset into the duration of the animation element.
the keySplines attribute defines a set of Bézier curve control points associated with the keyTimes list, defining a cubic Bézier function that controls interval pacing. This attribute is ignored unless the calcMode attribute is set to spline. If there are any errors in the keySplines specification (bad values, too many or too few values), the animation will not occur.
the from attribute indicates the initial value of the attribute that will be modified during the animation. When used with the "to" attribute, the animation will change the modified attribute from the "from value" to the "to value". When used with the "by" attribute, the animation will change the attribute relatively from the "from value" by the "value specified in by".
the to attribute indicates the final value of the attribute that will be modified during the animation. The value of the attribute will change between the "from" attribute value and this value.
the by attribute specifies a relative offset value for an attribute that will be modified during an animation. The starting value for the attribute is either indicated by specifying it as value for the attribute given in the attributeName or the from attribute.
other animation attributes:
the attributeName attribute indicates the name of the CSS property or attribute of the target element that is going to be changed during an animation.
the additive attribute controls whether or not an animation is additive. It is frequently useful to define animation as an offset or delta to an attribute's value, rather than as absolute values.
the accumulate attribute controls whether or not an animation is cumulative. It is frequently useful for repeated animations to build upon the previous results, accumulating with each iteration. This attribute said to the animation if the value is added to the previous animated attribute's value on each iteration.
animation event attributes:
the onbegin attribute (depreciated)
the onend attribute (depreciated)
the onrepeat attribute (depreciated)
codes:
<div>
<svg viewBox="0 0 10 5">
<rect width="5" height="5">
<animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" />
</rect>
</svg>
</div>
The SVG <animateMotion> element provides a way to define how an element moves along a motion path.
Specific attributes include:
keyPoints: this attribute indicate, in the range [0,1], how far is the object along the path for each keyTimes associated values. Value type: <number>*; default value: none; animatable: no
path: this attribute defines the path of the motion, using the same syntax as the "d" attribute. Value type: <string>; default value: none; animatable: no.
rotate: this attribute defines a rotation applied to the element animated along a path, usually to make it pointing in the direction of the animation. Value type: <number>|auto|auto-reverse; default value: 0; animatable: no
animate-specific attributes also apply.
codes:
<svg viewBox="0 0 20 10" >
<path fill="none" stroke="lightgreen"
d="M2,5 C2,-5 18,15 18,5 C18,-5 2,15 2,5 z" />
<circle r="0.5" fill="red">
<animateMotion dur="10s" repeatCount="indefinite"
path="M2,5 C2,-5 18,15 18,5 C18,-5 2,15 2,5 z" />
</circle>
</svg>
The animateTransform element animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing.
Specific attributes include by, from, to, type. Also, animate-specific attributes apply to this element.
codes:
<div style="margin-left:5vw;">
<svg width="500" height="320" viewBox="0 0 500 320">
<polygon points="160,30 190,190 80,190">
<animateTransform attributeName="transform" attributeType="XML" type="rotate"
from="0 220 160" to="360 220 160" dur="10s" repeatCount="indefinite"/>
</polygon>
</svg>
</div>
The "circle" SVG element is an SVG basic shape, used to draw circles based on a center point and a radius.
Specific attributes include:
cx: the x-axis coordinate of the center of the circle. Value type: <length>|<percentage> ; default value: 0; animatable: yes
cy: the y-axis coordinate of the center of the circle. Value type: <length>|<percentage> ; default value: 0; animatable: yes
r: the radius of the circle. A value lower or equal to zero disables rendering of the circle. Value type: <length> ; default value: 0; animatable: yes
pathLength: the total length for the circle's circumference, in user units. Value type: <number> ; default value: none; animatable: yes
codes:
<div style="margin-left:5vw;">
<svg viewBox="0 0 30 30">
<circle cx="10" cy="10" r="7"/>
</svg>
</div>
The "clipPath" SVG element defines a clipping path, to be used by the clip-path property. A clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn.
Specific attributes include:
clipPathUnits: defines the coordinate system for the contents of the "clipPath" element. Value type: userSpaceOnUse|objectBoundingBox; default value: userSpaceOnUse; animatable: yes
codes:
<div>
<svg viewBox="-10 -5 30 20">
<clipPath id="myClip">
<!--Everything outside the circle will be clipped and therefore invisible. -->
<circle cx="4" cy="3.5" r="3.5" />
</clipPath>
<!-- The original black heart, for reference -->
<path id="heart" d="M1,3 A2,2,0,0,1,5,3 A2,2,0,0,1,9,3 Q9,6,5,9 Q1,6,1,3 Z" />
<!--Only the portion of the red heart inside the clip circle is visible. -->
<use clip-path="url(#myClip)" xlink:href="#heart" fill="red" />
</svg>
</div>
<.style>
/* With a touch of CSS for browsers who implemented the r Geometry Property. */
@keyframes openYourHeart {from {r: 0} to {r: 60px}}
#myClip circle {animation: openYourHeart 15s infinite; }
</style>
The <defs> element is used to store graphical objects that will be used at a later time. Objects created inside a "defs" element are not rendered directly. To display them you have >to reference them (with a "use" element for example). Graphical objects can be referenced from anywhere, however, defining these objects inside of a "defs" element promotes understandability of the SVG content and is beneficial to the overall accessibility of the document.
codes:
<div style="margin-left:5vw;">
<svg viewBox="-1.5 -0.5 10 7">
<!-- Some graphical objects to use -->
<defs>
<circle id="myCircle" cx="0" cy="0" r="3" />
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="30%" stop-color="gold" />
<stop offset="60%" stop-color="red" />
<stop offset="80%" stop-color="blue" />
</linearGradient>
</defs>
<!-- using my graphical objects -->
<use x="3" y="3" xlink:href="#myCircle" fill="url('#myGradient')" />
</svg>
</div>
The <desc> element provides an accessible, long-text description of any SVG container element or graphics element.
Text in a "desc" element is not rendered as part of the graphic. If the element can be described by visible text, it is possible to reference that text with the "aria-describedby" attribute. If aria-describedby is used, it will take precedence over "desc".
The hidden text of a "desc" element can also be concatenated with the visible text of other elements using multiple IDs in an aria-describedby value. In that case, the "desc" element must provide an ID for reference.
codes:
<svg viewBox="0 0 10 7" >
<circle cx="3" cy="3" r="2">
<desc>
I'm a circle and that description is here to
demonstrate how I can be described, but is it
really necessary to describe a simple circle
like me?
</desc>
</circle>
</svg>
The <discard> SVG element allows authors to specify the time at which particular elements are to be discarded, thereby reducing the resources required by an SVG user agent. This is particularly useful to help SVG viewers conserve memory while displaying long-running documents. The "discard" element may occur wherever the "animate" element may.
Specific attributes include:
the begin attribute defines when an animation should begin or when an element should be discarded. The attribute value is a semicolon separated list of values. The interpretation of a list of start times is detailed in the SMIL specification in "Evaluation of begin and end time lists". Each individual value can be one of the following : 'offset-value', 'syncbase-value', 'event-value', 'repeat-value', 'accessKey-value', 'wallclock-sync-value' or the keyword 'indefinite'.
the href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.
The <ellipse> element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.
Specific attributes include:
cx: the x position of the ellipse. default value: 0 ; animatable: yes
cy: the ys position of the ellipse. default value: 0 ; animatable: yes
rx: the radius of the ellipse on the x axis. Value type: auto|"length"|"percentage" ; default value: auto; animatable: yes
ry: the radius of the ellipse on the y axis. Value type: auto|"length"|"percentage" ; default value: auto; animatable: yes
pathLength: this attribute lets specify the total length for the path, in user units. Value type: "number" ; default value: none; animatable: yes
codes:
<svg viewBox="0 0 100 20">
<ellipse cx="50" cy="10" rx="50" ry="10"/>
</svg>